<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            overflow: hidden;
            border: 1px solid salmon;
            width: 360px;
            height: 300px;
        }
        .list{
            width: 1440px;
            height: 300px;
            float: left;
        }
        .list li{
            width: 360px;
            height: 300px;
            list-style: none;
            float: left;
            position: relative;
            animation: move 4s linear infinite alternate;
        }
        .list li img{
            width: 360px;
            height: 300px;
        }
        @keyframes move{
            0%{
                width: 360px;
                height: 300px;
                left: 0;
                top: 0;
            }
            20%{
                width: 360px;
                height: 300px;
                left: 0;
                top: 0;
            }
            25%{
                width: 360px;
                height: 300px;
                top: 0;
                left: -360px;
            }
            45%{
                width: 360px;
                height: 300px;
                top: 0;
                left: -360px;
            }
            50%{
                width: 360px;
                height: 300px;
                top: 0;
                left: -720px;
            }
            70%{
                width: 360px;
                height: 300px;
                top: 0;
                left: -720px;
            }
            75%{
                width: 360px;
                height: 300px;
                top: 0;
                left: -1080px;
            }
            95%{
                width: 360px;
                height: 300px;
                top: 0;
                left: -1080px;
            }
            100%{
                width: 360px;
                height: 300px;
                top: 0;
                left: -1081px;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="list">
            <li>
                <img src="https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=b57666d9aa36afc3110c39658319eb85/908fa0ec08fa513d90ae47c7606d55fbb2fbd9a7.jpg" alt="">
            </li>
            <li>
                <img src="https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=303a6da4f4773912db268361c8198675/9922720e0cf3d7cabdf2146faf1fbe096b63a9a7.jpg" alt="">
            </li>
            <li>
                <img src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=158d54c473738bd4db21b431918b876c/f7246b600c33874424c104650c0fd9f9d72aa0a7.jpg" alt="">
            </li>
            <li>
                <img src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=cf10bf1a143d269731d30e5d65f9b24f/64380cd7912397ddceb81ad41c82b2b7d1a28719.jpg" alt="">
            </li>
        </ul>
    </div>
</body>
</html>